<!DOCTYPE html>
<html>
<head>

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    
    <title>Routenberechnung am Beispiel</title>
    
    <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" 
          rel="stylesheet" 
          type="text/css" />
          
    <script type="text/javascript" 
            src="http://maps.google.com/maps/api/js?sensor=false">
    </script>
    
    <script type="text/javascript">
      
      var directionDisplay;
      var directionsService = new google.maps.DirectionsService();
      var map;
      var geocoder;
     
      // Karte initialisieren mit festen Koordinaten als Mittelpunkt
      function initialize() {
            geocoder = new google.maps.Geocoder();
            directionsDisplay = new google.maps.DirectionsRenderer();
            
			// Kartenoptionen
            var myOptions = {
              zoom: 10,
              navigationControl: true,
              mapTypeControl: true,
              scaleControl: true,
              mapTypeId: google.maps.MapTypeId.TERRAIN,
    
            }

	  // Eine Route zwischen zwei Orten berechnen
	  function myRoute(start, ziel){
		  var start = start;
		  var end = ziel;
		  var wayp = [];
		  
		  // Wegpunkt in die Route einfügen
		  wayp.push({
			location:"Berlin Alexanderplatz",
			stopover:true
		  });
  
		  // Request an Google Maps absetzen
		  var request = {
			  // Startpunkt
			  origin:start,
			  // Zielpunkt 
			  destination:end,
			  // Wegpunkte
			  waypoints: wayp,
			  // Alternative Routen anzeigen
			  provideRouteAlternatives: true,
			  // Route optimieren
			  optimizeWaypoints: true,
			  // Reisemodus: Auto
			  travelMode: google.maps.DirectionsTravelMode.DRIVING
		  };
		  
		  // Routenanfrage absetzen  
		  directionsService.route(request, function(result, status) {
			  if (status == google.maps.DirectionsStatus.OK) {
			  	directionsDisplay.setDirections(result);
			  }
		  });
  
	  }
		  // Karte initialisieren  
		  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
		  
		  // Route auf der Karte anzeigen 
		  directionsDisplay.setMap(map);
		  directionsDisplay.setPanel(document.getElementById("directionsPanel"));
  
		  myRoute("Berlin Mitte", "Berlin Friedrichshain");
	}
     
  
</script>
</head>

<body onload="initialize()">

    <!-- Platz für die Karte reservieren -->
    <div id="map_canvas" style="float:left;width:100%;height:100%;">
    
    </div>
    
    <!-- Routenbeschreibung -->
    <div id="directionsPanel" style="float:right;width:0%;height 100%">
    
    </div>

</body>

</html>
